<template>
  <!--车牌号输入组件-->
  <view v-if="show" class="trailer-keyboard">
    <u-popup :show="show" :closeOnClickOverlay="false">
      <view class="keyBoard_content">
        <!-- header -->
        <view class="top-part flex">
          <view class="font-30 close" @click="closeKeyboard">x</view>
          <view class="message color-333">输入车牌号</view>
          <view
              class="font-30 confirm"
              :class="{'confirm-active': confirmBtnFocus}"
              @click="confirmKeyboard">确定
          </view>
        </view>

        <!-- input checkbox -->
        <view class="input-and-checkbox">
          <!-- input -->
          <view class="license flex">
            <view
                v-for="(item,index) in codeList"
                :key="index"
                class="edit-text"
                :class="{'border-active': currentFocus === index,'space-left': index === 2}">
              <view>{{item.value}}</view>
            </view>
          </view>
          <!-- checkbox -->
          <view v-if="vehicleType === 'car' && checkboxShow" class="checkbox-box">
            <!--  -->
            <u-checkbox-group
                class="uCheckbox"
                v-model="checkboxList"
                @change="checkboxChange"
            >
              <u-checkbox
                  :label="'新能源车'"
                  :name="'新能源车'"
                  shape="circle"
                  activeColor="#27B57D"
                  :checked="isNewEnergy"
              >
              </u-checkbox>
            </u-checkbox-group>
          </view>
        </view>

<!--        {{provinceBoardShow}}-->
        <!-- 键盘 -->
        <view class="keyboard-content">
          <!-- 省份键盘 -->
          <template v-if="provinceBoardShow">
            <view class="province-keyboard flex">
              <view
                  class="td td-nor color-333"
                  v-for="(item,index) in provincesKeyList"
                  :key="index"
                  @click="provinceKeyClick(item,index)"
                  hover-class="board-active"
                  hover-start-time="0"
                  hover-stay-time="80">
                {{item}}
              </view>
            </view>
          </template>

          <!--数字键盘-->
          <template v-if="!provinceBoardShow">
            <view class="number-keyboard flex between">

                <view
                    :class="numberIsDis ? 'board-active td td-num color-333' : 'td td-num color-333'"
                    v-for="(item,index) in numberKeyList"
                    :key="index"
                    @click="numberKeyClick(item,index)"
                    :hover-class="numberIsDis ? '' : 'board-active'"
                    hover-start-time="0"
                    hover-stay-time="80">
                  {{item}}
                </view>
            </view>
          </template>

          <!--字母键盘-->

          <template v-if="!provinceBoardShow">
            <view class="english-keyboard flex between">

                <view
                    class="td td-num color-333"
                    :class="englishIsDis ? 'board-active' : ''"
                    v-for="(item,idx) in englishKeyOneList"
                    :key="idx"
                    @click="englishKeyClick(item,idx)"
                    :hover-class="englishIsDis ? '' : 'board-active'"
                    hover-start-time="0"
                    hover-stay-time="80">
                  {{item}}
                </view>

            </view>
            <!-- 最后一行 -->
            <view class="english-keyboard flex englishtTwo">
<!--              <template>-->
                <view
                    class="td td-num color-333"
                    :class="englishIsDis ? 'board-active' : ''"
                    v-for="(item,index) in englishKeyTwoList"
                    :key="index"
                    @click="englishKeyClick(item,index)"
                    :hover-class="englishIsDis ? '' : 'board-active'"
                    hover-start-time="0"
                    hover-stay-time="80">
                  {{item}}
                </view>
<!--              </template>-->

              <!-- 挂字键 -->
              <template v-if="vehicleType === 'trailer'">
                <view
                    @click="trailerFiledClick('挂')"
                    class="td td-num color-333"
                    :class="trailerFiledIsDis ? 'board-active' : ''"
                    :hover-class="trailerFiledIsDis ? '' : 'board-active'"
                    hover-start-time="0"
                    hover-stay-time="80"
                >挂</view>
              </template>
            </view>
          </template>

          <!--清除按钮-->
          <view
              @click="backspace"
              class="delete flex"
              hover-class="board-active"
              hover-start-time="0"
              hover-stay-time="80">
            <view> 删除 </view>
<!--            <image class="deleteImg" src="@/static/my/clear.png" />-->
          </view>
        </view>

      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  name: 'carnum',
  props: {
    // 组件显示
    show: {
      type: Boolean,
      default: false
    },
    // 初始传入车牌号
    vehicleNo: {
      type: String,
      default: ''
    },
    /**
     * 车辆牌照类型 默认挂车
     * trailer  挂车
     * car      汽车
     */
    vehicleType: {
      type: String,
      default: 'car'
    },
    // 是否展示新能源切换按钮
    checkboxShow: {
      type: Boolean,
      default: true,
    }
  },
  data() {
    return {
      /**
       * currIndex 初始化为零  控制确定按钮高亮
       * currentFocus 初始化为零 控制输入框高亮
       */
      numberIsDis: true, // 输入键盘不可点击 true为不可点击
      englishIsDis: false, // 字母键盘可点击
      provinceBoardShow: true, // 省键盘
      isNewEnergy: false, // 是否新能源
      checkboxList: [],
      trailerFiledIsDis: true, // 挂字禁用
      provincesKeyList: '京津冀晋蒙辽吉黑沪苏浙皖闽赣鲁豫鄂湘粤桂琼渝川贵云藏陕甘青宁新',
      numberKeyList: '0123456789',
      englishKeyOneList: 'ABCDEFGHJKLMNPQRSTUV',
      englishKeyTwoList: 'WXYZ',
      currentFocus: 0,
      currIndex: 0,
      plateLimit: 7, // 车牌号位数
      codeList: [],
      // codeReset: []
    };
  },
  watch: {
    show: {
      handler(val) {
        this.initData()
      },
      immediate: true,
    }
  },
  computed: {
    confirmBtnFocus() {
      return this.currIndex === this.codeList.length
    }
  },
  methods: {
    // 省份键盘
    provinceKeyClick(val,index) {
      this.currentFocus++;
      this.currIndex++;
      this.codeList[0].value = val;
      this.provinceBoardShow = false;
      this.numberIsDis = true;
      this.englishIsDis = false;
    },

    // 数字键盘
    numberKeyClick(val,idx) {
      if(this.numberIsDis) return
      if (this.currIndex >= this.codeList.length) return
      this.currIndex++;
      this.currentFocus = this.currIndex;
      this.codeList[this.currIndex - 1].value = val;
      if(this.vehicleType === 'trailer') {
        this.setTrailerKeyboardDis()
      }
    },

    // 字母键盘
    englishKeyClick(val,idx) {
      if(this.englishIsDis) return
      if (this.currIndex >= this.codeList.length) return
      this.currIndex++;
      this.currentFocus = this.currIndex;
      this.codeList[this.currIndex - 1].value = val;
      if(this.currIndex === 2) this.numberIsDis = false;
      if(this.vehicleType === 'trailer') {
        this.setTrailerKeyboardDis()
      }
    },

    // 挂字点击
    trailerFiledClick(val) {
      if(this.trailerFiledIsDis) return
      if (this.currIndex > this.codeList.length - 1) return
      this.currIndex++;
      this.currentFocus = this.currIndex + 1;
      this.codeList[this.currIndex - 1].value = val;
    },

    // 设置挂车键盘禁用（最后一个只能选择挂）
    setTrailerKeyboardDis() {
      if(this.currIndex + 1 === this.codeList.length) {
        this.numberIsDis = true;
        this.englishIsDis = true;
        this.trailerFiledIsDis = false;
      }
    },

    // 退格
    backspace() {
      if (!this.currIndex) return
      this.currIndex--;
      this.codeList[this.currIndex].value = '';
      this.currentFocus = this.currIndex;
      this.provinceBoardShow = this.currIndex === 0;
      if(this.currIndex === 1) this.numberIsDis = true;
      if(this.vehicleType === "trailer" && this.currIndex === this.codeList.length - 2) {
        this.numberIsDis = false;
        this.englishIsDis = false;
        this.trailerFiledIsDis = true;
      }
    },

    // 关闭
    closeKeyboard(e) {
      this.$emit('update:show',false)
      this.$emit('close')
    },

    // 确定
    confirmKeyboard(e) {
      if (this.currIndex < this.codeList.length) return
      let plate = ''
      this.codeList.map(item => (plate += item.value))
      this.$emit('confirm', plate)
      this.closeKeyboard()
    },

    // 是否新能源车牌checkbox change
    checkboxChange(val) {
      console.log(val,'checkbox change');
      this.isNewEnergy = val.length ? true : false;

      if(val.length) {
        this.codeList.push({value: ''})
        // this.codeReset.push({value: ''})
      } else {
        this.codeList.splice(this.codeList.length - 1,1)
        // this.codeReset.splice(this.codeList.codeReset - 1,1)
        let vehicleNo = "";
        this.codeList.map(item => (vehicleNo += item.value))
        if(vehicleNo.length === this.codeList.length && this.currIndex > this.codeList.length) {
          this.currIndex--;
          this.currentFocus--
        }
      }
    },

    initData() {
      console.log('initData',this.isNewEnergy);
      console.log(this.checkboxList);
      let temp = []
      // let reset = []
      const vehicleNoTrim = this.vehicleNo.trim()
      const Leng = vehicleNoTrim ? vehicleNoTrim.length : 0;

      // 新能源checkbox回显
      this.isNewEnergy = Leng > 7 ? true : false;
      this.checkboxList = Leng > 7 ? ['新能源车'] : []

      if (Leng) {
        let arr = vehicleNoTrim.split('')
        arr.forEach(item => {
          temp.push({value: item})
          // reset.push({value: ''})
        })
      } else {
        // 初始化设置数据
        for (let index = 0; index < this.plateLimit; index++) {
          temp.push({value: ''})
          // reset.push({value: ''})
        }
      }

      // 解决车牌号回显位数不够问题
      if(Leng > 0 && Leng < 7) {
        let num = 7 - Leng;
        for(let i = 0; i < num; i++) {
          temp.push({value: ''})
        }
      }
      // 禁用设置
      this.isNewEnergy = Leng > 7 ? true : false;
      this.provinceBoardShow = Leng > 0 ? false : true;
      this.numberIsDis = Leng < 2 ? true : false;
      this.englishIsDis = false;
      if(this.vehicleType === 'trailer') {
        if(Leng >= 6) {
          this.numberIsDis = true;
          this.englishIsDis = true;
        }
        this.trailerFiledIsDis = Leng < 6 ? true: false;
      }

      this.codeList = temp;
      // this.codeReset = reset;
      this.currentFocus = Leng;
      this.currIndex = vehicleNoTrim ? vehicleNoTrim.length : 0;
    }
  },
}
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
}

.between {
  justify-content: space-between;
}

.font-30 {
  font-size: 30rpx;
}

.color-333 {
  color: #333333;
}

.trailer-keyboard {

}

.keyBoard_content {
  z-index: 9999;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  background: #fff;

  .top-part {
    width: 100%;
    padding: 25rpx 40rpx;
    height: 92rpx;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border-bottom: 1rpx solid #EAEAEA;
    margin-bottom: 15rpx;
    text-align: center;

    .close {
      width: 10%;
      font-size: 47rpx;
      color: #A0A0A0;
    }

    .message {
      font-size: 15px;
      width: 80%;
      text-align: center;
      font-weight: Semibold;
    }

    .confirm {
      width: 10%;
      color: #A0A0A0;
      font-weight: Regular;

      &.confirm-active {
        color: #27B57D;
      }
    }
  }

  .input-and-checkbox {

    .license {
      box-sizing: border-box;
      justify-content: space-around;
      margin: 72rpx 86rpx 30rpx;

      .edit-text {
        height: 80rpx;
        line-height: 80rpx;
        width: 60rpx;
        border: 1rpx solid #A0A0A0;
        border-radius: 8rpx;
        text-align: center;
        font-size: 36rpx;

        &.space-left {
          // margin-left: 30rpx;
        }

        &.border-active {
          border: 1rpx solid #5BCA92;
        }
      }
    }

    .checkbox-box {
      margin: 25rpx 86rpx 28rpx;
      display: flex;
      justify-content: flex-end;

      .uCheckbox {

      }
    }
  }

  .keyboard-content {
    width: 100%;
    height: 450rpx;
    box-sizing: border-box;
    position: relative;

    .td {
      font-family: "PingFangSC";
      font-size: 34rpx;
      color: #333333;
      font-weight: 500;
      margin: 12rpx 4rpx;
      border: 1rpx solid #E0E0E0;
      border-radius: 8rpx;
      height: 84rpx;
      line-height: 84rpx;
      text-align: center;
    }

    .province-keyboard {
      margin: 0 50rpx;
      flex-wrap: wrap;

      .td-nor {
        flex: 0 1 9%;
        margin-right: 3px;
      }
    }

    .number-keyboard {
      margin: 0 5rpx;

      .td-num {
        flex: 0 1 8%;
      }
    }

    .english-keyboard {
      margin: 0 5rpx;
      flex-wrap: wrap;

      &.englishtTwo {
        margin-left: 80rpx;

        .td-num {
          margin-right: 5px;
          flex: 0 1 8.8%;
        }
      }

      .td-num {
        flex: 0 1 8%;
      }
    }

    .board-active {
      box-shadow: 0 0 0 #e5e5e5;
      background: #e5e5e5;
    }

    .delete {
      width: 140rpx;
      height: 84rpx;
      text-align: center;
      background-color: #D8D8D8;
      border-radius: 8rpx;
      position: absolute;
      right: 73rpx;
      bottom: 30rpx;
      justify-content: center;
      align-items: center;

      .deleteImg {
        width: 44rpx;
        height: 30rpx;
      }
    }
  }

}
</style>
